import React, { Component } from 'react'
import { Tabs, Button, Mask } from 'antd-mobile'
import { CloseOutline, SearchOutline } from 'antd-mobile-icons'
import axios from 'axios'
import _ from 'lodash'
import '../assets/scss/Menu.scss'
export default class Menu extends Component {
  state = {
    menuList: [],
    visible: false,
    result: []
  }
  componentDidMount() {
    axios.get('http://localhost:5000/menu').then((res) => {
      console.log(res)
      this.setState({ menuList: res.data })
    })
  }
  // 搜索方法
  doSearch = (value) => {
    console.log(value)
    axios.get('http://localhost:5000/search?q=' + value).then((res) => {
      console.log(res.data)
      this.setState({ result: res.data })
    })
  }
  //  调用loash的debounce防抖函数
  doSearch1 = _.debounce(this.doSearch, 1000)
  render() {
    const { visible, result } = this.state
    return (
      <div>
        {/* 头部导航栏 */}
        <div className="nav">
          <span>菜单</span>
        </div>
        {/* 分类 */}
        <Tabs stretch={false} className="tabs">
          <Tabs.Tab title="全部" key="all"></Tabs.Tab>
          <Tabs.Tab title="饮料" key="drink"></Tabs.Tab>
          <Tabs.Tab title="美食" key="foods"></Tabs.Tab>
          <Tabs.Tab title="咖啡产品" key="coffee"></Tabs.Tab>
          <Tabs.Tab title="商品" key="goods"></Tabs.Tab>
        </Tabs>
        {/* 菜单列表 */}
        <div className="menu">
          {this.state.menuList.map((item1) => (
            // 每一个分类
            <div key={item1.cateId}>
              <div className="cateName">{item1.cateName}</div>
              <div className="list">
                {item1.list.map((item) => (
                  // 每一个分类下的每一件商品
                  <div key={item.id}>
                    <img src={`https://www.starbucks.com.cn${item.preview}`} />
                    <div className="title1">{item.title}</div>
                  </div>
                ))}
              </div>
              <div className="line1"></div>
            </div>
          ))}
        </div>
        <Button
          shape="rounded"
          color="success"
          style={{
            position: 'fixed',
            right: 20,
            bottom: 80,
            fontWeight: 'bold',
            padding: 20
          }}
          onClick={() => this.setState({ visible: true })}
        >
          搜索菜单
        </Button>
        <Mask
          color="white"
          opacity={1}
          visible={visible}
          onMaskClick={() => this.setState({ visible: false })}
          style={{ overflowY: 'auto' }}
        >
          {/* 关闭 */}
          <div style={{ marginTop: 15, textAlign: 'right', paddingRight: 10 }}>
            <CloseOutline
              fontSize={25}
              onClick={() => this.setState({ visible: false })}
            />
          </div>
          {/* 搜索框 */}
          <div className="search">
            <input
              type="text"
              placeholder="搜索菜单"
              onChange={(event) => this.doSearch1(event.target.value)}
            />
            <div style={{ position: 'absolute', top: '35%', right: 20 }}>
              <SearchOutline fontSize={25} />
            </div>
          </div>
          {/* 搜索结果列表 */}
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              flexWrap: 'wrap'
            }}
          >
            {result.map((item) => (
              <div className="item" key={item.id}>
                <img src={`https://www.starbucks.com.cn${item.preview}`} />
                <div className="title1">{item.title}</div>
              </div>
            ))}
          </div>
        </Mask>
      </div>
    )
  }
}
